<template>
  <div class="dashboard-container">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-header">
            <div class="stat-title">
              <i class="el-icon-s-goods"></i>
              <span>累计捐赠</span>
            </div>
            <div class="stat-number">2,358</div>
          </div>
          <div class="stat-footer">
            <span>本月新增：128</span>
            <el-tag size="small" type="success">+23.5%</el-tag>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-header">
            <div class="stat-title">
              <i class="el-icon-s-help"></i>
              <span>援助需求</span>
            </div>
            <div class="stat-number">1,286</div>
          </div>
          <div class="stat-footer">
            <span>待处理：45</span>
            <el-tag size="small" type="warning">12 急需</el-tag>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-header">
            <div class="stat-title">
              <i class="el-icon-s-cooperation"></i>
              <span>物资配送</span>
            </div>
            <div class="stat-number">892</div>
          </div>
          <div class="stat-footer">
            <span>在途：32</span>
            <el-tag size="small" type="info">98% 准时率</el-tag>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-header">
            <div class="stat-title">
              <i class="el-icon-s-custom"></i>
              <span>志愿者</span>
            </div>
            <div class="stat-number">526</div>
          </div>
          <div class="stat-footer">
            <span>活跃：238</span>
            <el-tag size="small" type="primary">95% 好评</el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 中部图表区域 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="16">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>物资捐赠趋势</span>
            <el-radio-group v-model="chartTimeRange" size="small" style="float: right;">
              <el-radio-button label="week">本周</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="year">全年</el-radio-button>
            </el-radio-group>
          </div>
          <div class="chart-container">
            <!-- 这里放置echarts图表组件 -->
            <div ref="mainChart" style="width: 100%; height: 350px;"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>物资分类统计</span>
          </div>
          <div class="chart-container">
            <!-- 这里放置饼图组件 -->
            <div ref="pieChart" style="width: 100%; height: 350px;"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 底部列表区域 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>最新捐赠</span>
            <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
          </div>
          <el-table :data="latestDonations" style="width: 100%" size="small">
            <el-table-column prop="date" label="日期" width="100"></el-table-column>
            <el-table-column prop="name" label="物资名称"></el-table-column>
            <el-table-column prop="donor" label="捐赠方"></el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === '已完成' ? 'success' : 'warning'" size="small">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>待处理需求</span>
            <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
          </div>
          <el-table :data="pendingDemands" style="width: 100%" size="small">
            <el-table-column prop="date" label="日期" width="100"></el-table-column>
            <el-table-column prop="title" label="需求标题"></el-table-column>
            <el-table-column prop="region" label="地区"></el-table-column>
            <el-table-column prop="urgency" label="紧急程度" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.urgency === '紧急' ? 'danger' : 'warning'" size="small">
                  {{ scope.row.urgency }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Index',
  data() {
    return {
      chartTimeRange: 'month',
      latestDonations: [
        { date: '2024-03-12', name: '防疫物资', donor: '爱心企业', status: '已完成' },
        { date: '2024-03-11', name: '学习用品', donor: '教育基金会', status: '运输中' },
        { date: '2024-03-11', name: '食品物资', donor: '食品公司', status: '已完成' },
        { date: '2024-03-10', name: '医疗设备', donor: '医疗器械厂', status: '已完成' },
        { date: '2024-03-10', name: '保暖衣物', donor: '服装企业', status: '运输中' }
      ],
      pendingDemands: [
        { date: '2024-03-12', title: '山区小学需要图书', region: '云南省大理市', urgency: '普通' },
        { date: '2024-03-12', title: '医疗站缺少药品', region: '四川省凉山州', urgency: '紧急' },
        { date: '2024-03-11', title: '村小需要电脑', region: '贵州省黔东南州', urgency: '普通' },
        { date: '2024-03-11', title: '防疫物资紧缺', region: '湖南省湘西州', urgency: '紧急' },
        { date: '2024-03-10', title: '需要保暖衣物', region: '甘肃省陇南市', urgency: '普通' }
      ]
    }
  },
  mounted() {
    this.initMainChart()
    this.initPieChart()
  },
  methods: {
    initMainChart() {
      const chartDom = this.$refs.mainChart
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['物资捐赠', '需求数量', '配送完成']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '物资捐赠',
            type: 'line',
            smooth: true,
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '需求数量',
            type: 'line',
            smooth: true,
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '配送完成',
            type: 'line',
            smooth: true,
            data: [150, 232, 201, 154, 190, 330, 410]
          }
        ]
      }
      myChart.setOption(option)
    },
    initPieChart() {
      const chartDom = this.$refs.pieChart
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '物资分类',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '食品物资' },
              { value: 735, name: '医疗物资' },
              { value: 580, name: '教育用品' },
              { value: 484, name: '生活用品' },
              { value: 300, name: '其他' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px);

  .stat-card {
    .stat-header {
      .stat-title {
        color: #666;
        font-size: 14px;
        margin-bottom: 10px;
        i {
          margin-right: 5px;
          font-size: 18px;
        }
      }
      .stat-number {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
        margin: 10px 0;
      }
    }
    .stat-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      color: #909399;
      font-size: 12px;
    }
  }

  .chart-container {
    position: relative;
    width: 100%;
    height: 350px;
  }

  .el-card {
    margin-bottom: 20px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
}
</style>